<template>
  <div class="line" :id="propses.id"></div>
</template>
<script lang='ts' setup>
// 引入图表库
import * as echarts from "echarts";
import { onMounted } from "vue";
type EChartsOption = echarts.EChartsOption;
const propses = defineProps({
  id: {
    type: String, //类型字符串
    default: "",
  },
  data: {
    type: Array, //类型数组
    default: [],
  },
  names: {
    type: Array, //类型数组
    default: [],
  },
  dataX: {
    type: Array, //类型数组
    default: [],
  },
  xName: {
    type: String,
    default: ""
  },
  yName: {
    type: String,
    default: ""
  },
  title: {
    type: String,
    default: ""
  }
});
const clickIsDis = (id, names, lineX, shuju, xName, yName, title) => {
  /**************设备概览图表start********************/
  var chartDom = document.getElementById(id)!;
  setTimeout(() => {
    // console.log(names, lineX, shuju)
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;
    var charts = {
      title: title,
      xName: xName,
      unit: yName,
      names: names,
      // color: JSON.parse(sessionStorage.getItem("orgUser")),
      lineX: lineX,
      value: shuju,
    };
    var lineY = [];
    if (charts.names.length > 1) {
      for (var i = 0; i < charts.names.length; i++) {
        // console.log(charts.value[i])

        // let colors = charts.color.find((item) => item.orgName === charts.names[i])
        //   ? charts.color.find((item) => item.orgName === charts.names[i]).color
        //   : "rgba(97, 130, 235,1)";
        var data = {
          name: charts.names[i],
          type: "line",
          //   color: charts.color.find((item) => item.orgName === charts.names[i])
          //     ? charts.color.find((item) => item.orgName === charts.names[i]).color
          //     : "#6182eb",
          smooth: true,
          lineStyle: {
            //   color: charts.color.find((item) => item.orgName === charts.names[i])
            //     ? charts.color.find((item) => item.orgName === charts.names[i])
            //         .color
            //     : "#6182eb",
            // width: 2,
            shadowColor: "#509dc8",
            shadowBlur: 0,
          },
          //   areaStyle: {
          //     // normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         {
          //           offset: 0,
          //           color: colors
          //             ? colors.substring(0, colors.lastIndexOf(",")) + ",0.4)"
          //             : "rgba(97, 130, 235,.4)",
          //         },
          //         {
          //           offset: 1,
          //           color: colors
          //             ? colors.substring(0, colors.lastIndexOf(",")) + ",0)"
          //             : "rgba(97, 130, 235,0)",
          //         },
          //       ]),
          //     // },
          //   },
          symbol: "none",
          symbolSize: 5,
          data: charts.value[i],
        };
        lineY.push(data);
      }
    } else {
      lineY = [{
        type: "line",
        smooth: true,
        lineStyle: {
          shadowColor: "#509dc8",
          shadowBlur: 0,
        },
        symbol: "none",
        symbolSize: 5,
        data: charts.value,
      }]
    }

    option = {
      title: {
        text: charts.title
      },
      backgroundColor: "#fff",

      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(0,0,0,.8)",
        borderWidth: 1,
        borderRadius: 0,
        appendToBody: true,
        formatter: (params) => {
          let templete = "";
          for (let i = 0; i < params.length; i++) {
            let item = params[i];
            // console.log(item.axisValue)
            let color = item.color;
            if (item.seriesType === "line") {
              templete +=
                '<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: ' +
                color +
                '; margin-right: 5px;"></span>';
              templete += item.seriesName + `: ` + item.data + "吨" + "<br>";
            }
          }
          return templete;
        },
        textStyle: {
          color: "#fff",
          fontSize: 14,
          align: "left",
        },
      },
      legend: {
        type: "scroll",
        top: "4%",
        icon: "circle",
        itemHeight: 8, // 修改icon图形大小
        itemWidth: 8, // 修改icon图形大小
        itemGap: 4, //图例图标与文字间的间距
        data: charts.names,
        textStyle: {
          fontSize: 12,
          padding: [2, 0, 0, 0],
          rich: {},
        },
        selectedMode: false,
        right: "4%",
      },
      grid: {
        top: "20%",
        left: "3%",
        right: "8%",
        bottom: "1%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        name: charts.xName,
        boundaryGap: false,
        data: charts.lineX,
        axisLabel: {
          // textStyle: {
          color: "#333",
          // },
        },

        axisLine: {
          lineStyle: {
            color: "#333",
          },
        },
      },
      yAxis: {
        name: charts.unit,
        type: "value",
        scale: true,
        axisLabel: {
          formatter: function (value, index) {
            return value;
          },
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "#eee",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#333",
          },
        },
      },
      series: lineY,
    };
    option && myChart.setOption(option, true);
    /**************设备概览图表end********************/
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }, 200);
};
onMounted(() => {
  clickIsDis(propses.id, propses.names, propses.dataX, propses.data, propses.xName, propses.yName, propses.title);
});
defineExpose({ clickIsDis });
</script>

<style scoped>
.line {
  margin-top: 20px;
  background: #f6f7f9;
  width: 100%;
  border-radius: 12px;
  height: 294px;
  margin-bottom: 20px;
}
</style>